<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				font-size: 36px;
				text-align: center;
				float: left;}
				/* 添加after伪元素 */
				.clearfix::after {   /* 在...之后 */
					content: ;     /* 内容为空 */
					display: block;    /* 转为块元素 */
					height: 0;    
					clear: both;    /* 清除两端浮动 */
					visibility: hidden;     /* 显示状态:隐藏 */
				}
				/* 添加双伪元素 */
				.clearfix::before,.clearfix::after{
					content: ;
					display: table;
				}
				.clearfix::after{
					clear: both;
				}		
		</style>
	</head>
	<body>
		<!-- 传统的网页布局：标准流（元素的显示模式）+浮动+定位
		浮动float：让块级元素一行内显示 
		float:left;左浮动，盒子从左往右摆动
		float：right；右浮动，盒子从右往左摆动
		float：none；浮动默认值
		网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
		标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置
		1、浮动的元素会脱标（脱离标准流）
		清除浮动办法：
			1.1额外标签法：隔墙法
			1.2给父盒子添加overflow:hidden;
			1.3给父盒子添加after（必须包含content（表示内容为空））伪元素
			1.4给父元素添加双伪元素
		-->
		<!-- 快速创建标签：
		1、直接创建标签：标签名*个数>tab键
		2、创建带有类名的标签：标签名.类名*个数>tab键     p.font*数字
		3、创建带有类名的div: .类名*个数>tab 键 -->
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
	</body>
</html>
